<template>
  <div id="main">
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="考勤模板名称：">
        <el-input v-model="form.name" style="width: 270px"></el-input>
      </el-form-item>
      <el-form-item label="打卡范围：">
        <el-select v-model="form.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上班时间：">
        <el-input v-model="form.start" style="width: 270px"></el-input>
      </el-form-item>
      <el-form-item label="下班时间：">
        <el-input v-model="form.end" style="width: 270px"></el-input>
      </el-form-item>

      <el-form-item label="工作日：">
        <el-checkbox-group v-model="form.type">
          <el-checkbox label="全选" name="type"></el-checkbox>
          <el-checkbox label="周一" name="type"></el-checkbox>
          <el-checkbox label="周二" name="type"></el-checkbox>
          <el-checkbox label="周三" name="type"></el-checkbox>
          <el-checkbox label="周四" name="type"></el-checkbox>
          <el-checkbox label="周五" name="type"></el-checkbox>
          <el-checkbox label="周六" name="type"></el-checkbox>
          <el-checkbox label="周日" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="备注：">
        <el-input
          type="textarea"
          v-model="form.desc"
          style="width: 300px"
          rows="5"
        ></el-input>
      </el-form-item>
      <p>适用成员</p>
      <button>新增成员</button>
      <div>
        <el-table :data="tableData" style="width: 100%" max-height="250">
          <el-table-column type="index" label="序号" width="180">
          </el-table-column>
          <el-table-column prop="name" label="头像" width="120">
          </el-table-column>
          <el-table-column prop="province" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="city" label="手机号" width="120">
          </el-table-column>
          <el-table-column prop="address" label="项目角色" width="120">
          </el-table-column>
          <el-table-column prop="zip" label="部门" width="120">
          </el-table-column>
          <el-table-column prop="zip" label="岗位" width="120">
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData)"
                type="text"
                size="small"
              >
                移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 富文本 -->
      <p>富文本</p>
      <query></query>
      <div></div>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>



<script>
import query from "../../../../components/query.vue";
export default {
  components: {
    query,
  },
  data() {
    return {
      tableData: [],
      form: {
        name: "",
        region: "",

        type: [],
        desc: "",
      },
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
  },
  mounted() {
    this.getGoodsDetail();
  },
};
</script>
<style scoped>
#main {
  margin-left: 60px;
}
</style>